<template>
  <view class="recommend">
    <view class="recommend-title"
      ><uni-icons :type="icon" :color="color" size="26" />{{ props.title
      }}<uni-icons :type="icon" :color="color" size="26"
    /></view>

    <div class="recommend-item">
      <view class="left">
        <uni-card
          class="recommend-item-card"
          v-for="(item, index) in leftRecommendData"
          :key="index"
          margin="2rpx"
          @tap="toDetail(item)"
        >
          <template v-slot:title>
            <view class="recommend-item-card-title"> {{ item.name }}</view>
          </template>
          <template v-slot:cover>
            <view class="recommend-item-card-image" @tap="toDetail(item)">
              <image :src="item.media[0].imgUrl" mode="widthFix"></image>
              <view class="recommend-item-card-cover-content">
                <text class="uni-subtitle uni-white"
                  >距离{{
                    mapUtil.distance(
                      +item.latitude,
                      +item.longitude,
                      location.latitude,
                      location.longitude
                    )
                  }}</text
                >
              </view>
            </view>
          </template>
          <text class="recommend-item-card-content">{{
            item.introduction
          }}</text>
        </uni-card>
      </view>
      <view class="right">
        <uni-card
          class="recommend-item-card"
          v-for="(item, index) in rightRecommendData"
          :key="index"
          margin="2rpx"
          @tap="toDetail(item)"
        >
          <template v-slot:title>
            <view class="recommend-item-card-title"> {{ item.name }}</view>
          </template>
          <template v-slot:cover>
            <view class="recommend-item-card-image" @tap="toDetail(item)">
              <image :src="item.media[0].imgUrl" mode="widthFix"></image>
              <view class="recommend-item-card-cover-content">
                <text class="uni-subtitle uni-white"
                  >距离{{
                    mapUtil.distance(
                      +item.latitude,
                      +item.longitude,
                      location.latitude,
                      location.longitude
                    )
                  }}</text
                >
              </view>
            </view>
          </template>
          <text class="recommend-item-card-content">{{
            item.introduction
          }}</text>
        </uni-card>
      </view>
    </div>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { getRecommendAPI } from "@/services/index";
import { getLocationStorage } from "@/utils/storage";
import { onMounted } from "vue";
import mapUtil from "@/utils/map";
const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
  title: {
    type: String,
    default: "",
  },
  icon: {
    type: String,
    default: "navigate-filled",
  },
  color: {
    type: String,
    default: "#333",
  },
});
let location = getLocationStorage();
onMounted(() => {
  getIndexData();
});

let leftRecommendData = ref<any>([]);
let rightRecommendData = ref<any>([]);

const getIndexData = async () => {
  leftRecommendData.value = [];
  rightRecommendData.value = [];
  let location = getLocationStorage();
  let result: any = await getRecommendAPI(location, 5);

  if (result.code == 200) {
    for (let i = 0; i < result.data.length; i++) {
      if (i % 2 == 0) {
        leftRecommendData.value.push(result.data[i]);
      } else {
        rightRecommendData.value.push(result.data[i]);
      }
    }
  } else {
    uni.showToast({
      title: "获取数据失败",
      icon: "error",
      duration: 1500,
    });
  }
};
const toDetail = (data: any) => {
  uni.navigateTo({
    url: `/pages/detail/detail?id=${data.id}&type=${data.type}`,
  });
};

defineExpose({ getRecommend: getIndexData });
</script>

<style lang="scss" scoped>
.recommend {
  padding-top: 10rpx;
  text-align: center;
  display: flex;
  flex-wrap: wrap;

  .recommend-title {
    flex-grow: 1;
    width: 100%;
    font-size: 40rpx;
    color: #333;
    font-weight: bold;
    padding: 15rpx;
  }

  .recommend-item {
    $height: 40rpx;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      width: 50%;
      display: flex;
      flex-direction: column;
      .recommend-item-card {
        .recommend-item-card-title {
          font-size: 30rpx;
          font-weight: bold;
        }

        .recommend-item-card-image {
          padding: 10rpx 0;
          position: relative;
          image {
            width: 100%;
            border-radius: 10rpx;
          }
          .recommend-item-card-cover-content {
            width: 98%;
            height: $height;
            color: white;
            font-size: 22rpx;
            line-height: $height;
            padding-left: 8rpx;
            text-align: left;
            position: absolute;
            bottom: 16rpx;
            background-color: rgba($color: #000000, $alpha: 0.3);
            border-bottom-left-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
          }
        }
        .recommend-item-card-content {
          overflow: hidden; /* 隐藏超出容器的内容 */
          text-overflow: ellipsis; /* 使用省略号代替超出部分的文本 */
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
  }
}
</style>
